<template>
	<view class="">
		<view class="one" v-if="this.userInformation.userID?false:true">
			<image class="image" src="../../static/order/person.png" mode=""></image>
			<view>登录后查看订单</view>
			<navigator url="/pages/login/login" open-type="navigate" hover-class="none">
				<button type="default">立即登录</button>
			</navigator>
		</view>
		<view class="two" v-if="this.userInformation.userID?true:false">
			<view v-if="this.userInformation.isadmin==0">
				<scroll-view class="scroll" scroll-y="true">
					<view class="all" v-for="(item,index) in this.user_order">
						<view class="top" >
							<image mode="aspectFill" :src="'../../static/FRL.jpg'" />
							<view class="frist">
								<view>福润隆超市</view>
								<view style="color: #808080;">付款成功</view>
							</view>
						</view>
						<view class="middle" v-for="(item_item,index) in item.goodsList" :key="index">
							<view class="box1">
								<view class="menusize1" >{{item_item.spmc}}</view> 
							</view>
							<view class="box2">
								<view class="menusize2" >数量x{{item_item.spsl}}</view>  
							</view>
							<view class="box3">
								<view class="menusize3">商品单价:{{item_item.spdj}}</view>  
							</view>    
						</view>
						<view class="bottom">
							<view class="button">交易时间:{{item.jysj}}</view>
							<view class="total">合计:{{item.totalMoney}} 元</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="admin" v-if="this.userInformation.isadmin==1">
				尊敬的管理员您好！
			</view>
		</view>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				nameList: ["福润隆超市" ],
				menulist: ["辣椒炒肉", "番茄炒蛋", "溜肉段", "米饭"],
				number: ["1", "2","3","4"],
				// active:1
				
			};
		},
		onLoad(){
			// console.log('order用户订单')
			// console.log(this.user_order)
		},
		computed: {
		  ...mapState(['userInformation','user_order'])
		},
		
		methods: {
			scrolltolower() {
				console.log("yes")

			}

		}
	}
</script>

<style lang=scss>
	.one{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.image{
			width: 480upx;
			margin-top: 150upx;
		}
		button{
			color: #FFFFFF;
			margin-top: 50rpx;
			background-color: #02a774;
			font-size: 33upx;
			/* outline: none; */
		}
	}
	.two{
		.all{
			border-bottom: 2upx solid #000000;
			padding: 5upx 3upx;
		}
		.top {
			display: flex;
			width: 100%;
			align-items: center;
			padding: 5upx 3upx;
		}
		image{
			width: 20%;
			height: 100rpx;
			border-radius:10upx;
		}
		.frist{
			display: flex;
			justify-content: space-between;
			width: 76%;
			margin-left: 2%;
		}
		.middle{
			display: flex;
			align-items: center;
			width: 100%;
		}
		.box1{
			width: 33%;
			float: left;
			height: 100%;
			/* border: 1upx solid #ff0000; */
		}
		.box2{
			width: 33%;
			float: left;
			height: 100%;
			/* border: 1upx solid #ff0000; */
		}
		.box3{
			width: 33%;
			float: left;
			height: 100%;
			/* border: 1upx solid #ff0000; */
		}
		.menusize1 {
			padding: 5upx 10upx;
			color: #555555;
		}
		.menusize2 {
			padding: 5upx 10upx;
			color: #555555;
			text-align: center;
		}
		.menusize3{
			padding: 5upx 10upx;
			text-align: center;
			color: #555555;
		}
		.bottom{
			display: flex;
			width: 100%;
			/* border: #007AFF 1px solid; */
			height: 60rpx;
			align-items: center;
			justify-content: space-between;
		}
		.button{
			padding: 3rpx 10rpx;
			color: #555555;
			background-color: #cccccc;
			border-radius:10upx;margin-left: 1%;
		}
		.total{
			padding: 3rpx 10rpx;
			color: #555555;
			font-weight: bold;
		}
		.admin{
			text-align: center;
			margin-top: 50upx;
		}
	}
</style>
